<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按爆沈换</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div Id="app">
        <button @click="changeFont">点击</button>
        <span>1.5秒内按爆，沈换叫你爸爸</span>
        <h1 v-text="text2"></h1>
        <h1 v-text="message" id="text1" v-bind:style="colorStyle"></h1>
        <h2 v-if="timerRunning || elapsedTime">用时: {{ elapsedTimeDisplay }}</h2>
    </div>
    <script>
        var app = Vue.createApp({
            setup() {
                let message = Vue.ref("沈换");
                let text2 = Vue.ref("");
                let colorStyle = Vue.ref("color:green");
                let startTime = Vue.ref(null);
                let timerRunning = Vue.ref(false);
                let elapsedTime = Vue.ref(0);
                let elapsedTimeDisplay = Vue.ref("0.00秒");
                let timerInterval = null;

                function changeFont() {
                    // 如果是第一次点击，开始计时
                    if (!timerRunning.value) {
                        startTime.value = new Date();
                        timerRunning.value = true;
                        startTimer();
                    }

                    let text1 = document.getElementById("text1");
                    let fontSize = parseInt(text1.style.fontSize) || 32;
                    text1.style.fontSize = (fontSize + 10) + "px";
                    changeColor(fontSize);
                }

                function startTimer() {
                    timerInterval = setInterval(() => {
                        if (timerRunning.value) {
                            const now = new Date();
                            elapsedTime.value = (now - startTime.value) / 1000;
                            elapsedTimeDisplay.value = elapsedTime.value.toFixed(2) + "秒";
                        }
                    }, 10);
                }

                function timerJudge(time) {
                    if (time < 1.5) {
                        text2.value = "沈换: 爸爸";
                    } else {
                        text2.value = "";
                    }
                }

                function stopTimer() {
                    timerRunning.value = false;
                    clearInterval(timerInterval);
                    timerJudge(elapsedTime.value);
                }

                function changeColor(size) {
                    let text1 = document.getElementById("text1");
                    if (size > 40 && size < 60) {
                        text1.style.color = "yellow";
                    } else if (size >= 60 && size < 80) {
                        text1.style.color = "orange";
                    } else if (size >= 80 && size < 100) {
                        text1.style.color = "red";
                    } else if (size >= 100 && size < 120) {
                        text1.style.color = "black";
                    } else if (size >= 120 && size < 160) {
                        message.value = "要爆了！";
                    } else if (size >= 160) {
                        message.value = "";
                        stopTimer();
                        alert("沈换被你按爆了，用时: " + elapsedTimeDisplay.value);
                    }
                }

                return {
                    message,
                    text2,
                    changeFont,
                    colorStyle,
                    timerRunning,
                    elapsedTime,
                    elapsedTimeDisplay
                }
            }
        });
        app.mount("#app");
    </script>
</body>

</html>